import React from 'react'
import { useDispatch } from 'react-redux'
import { useNavigate, Outlet, useLocation } from 'react-router'
import { Layout, Menu, Button } from 'antd'
import { setToken } from '@/store/slicers/user'
const { Header, Sider, Content } = Layout

const menuItems = [
  { key: '/user', label: '用户管理' },
  { key: '/role', label: '角色管理' }
]

export default function Home() {
      const dispatch = useDispatch()
      const navigate = useNavigate()
      const handleLogout = () => {
        dispatch(setToken(null))      // 清空redux和localStorage中的token
        navigate('/login', { replace: true }) // 跳转到登录页
      }
      return (
        <Layout style={{ minHeight: '100vh' }}>
          <Header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#fff', fontSize: 18 }}>
            <div style={{ fontWeight: 'bold' }}>管理系统</div>
            <Button type="primary" onClick={handleLogout}>
              退出登录
            </Button>
          </Header>
          <Layout>
            <Sider>
              <Menu
                theme="dark"
                mode="inline"
                selectedKeys={[location.pathname]}
                items={menuItems}
                onClick={({ key }) => navigate(key)}
              />
            </Sider>
            <Content style={{ margin: 24, background: '#fff', minHeight: 280 }}>
              <Outlet />
            </Content>
          </Layout>
        </Layout>
      )
}
